{% extends 'ApplicationBootstrapBundle::layout.html.twig' %}

{% block title %}Sticky Footer and Fixed Top Navbar Example for Bootstrap{% endblock %}

{% block layoutstyle %}
    <link href="{{ asset('bundles/applicationbootstrap/css/examples/navbar_fixed_sticky_footer.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block stylesheets %}
	<link href="{{ asset('bundles/applicationbootstrap/css/maps/google-maps/gmaps/gmaps.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block javascripts %}
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="{{ asset('bundles/applicationbootstrap/js/maps/google-maps/gmaps/gmaps.js') }}" type="text/javascript"></script>
    <script src="{{ asset('bundles/applicationbootstrap/js/maps/google-maps/mapsInit.js') }}" type="text/javascript"></script>
    <script type="text/javascript">
	    $(document).ready(function(){
	        $(function () { MapsInit(); });
	    });
    </script>
{% endblock %}

{% block navigation %}
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
        
            {% include 'ApplicationBootstrapBundle::_navbar.html.twig' %}
        
        </div>
    </nav>
{% endblock %}

{% block body %}
    <div class="container">
    
        <div class="page-header">
          <h1>Google Maps <small>Więcej przykładów w paczce gmaps/examples.</small></h1>
          
        </div>
        
        <div class="row">
		    <div class="col-lg-12">
		    	<h3>Map with overlays</h3>
			    <script type="text/javascript">
				    var map;
				    $(document).ready(function(){
				        map = new GMaps({
				            el: '#gmaps-overlay',
				            lat: -12.043333,
				            lng: -77.028333
				        });
				        map.drawOverlay({
				            lat: map.getCenter().lat(),
				            lng: map.getCenter().lng(),
				            layer: 'overlayLayer',
				            content: '<div class="overlay">Lima<div class="overlay_arrow above"></div></div>',
				            verticalAlign: 'top',
				            horizontalAlign: 'center'
				        });
				    });
				</script>
		    	<div id="gmaps-overlay" class="google-maps"></div>
		    </div>
        </div>
        
        <div class="row">
		    <div class="col-lg-6">
			    <h3>Basic Maps</h3>
				<div id="gmaps-basic" class="google-maps"></div>
		    </div>
		    
			<div class="col-lg-6">
				<h3>Map with markers</h3>
				<div id="gmaps-marker" class="google-maps"></div>
			</div>
        </div>
        <div class="row">
        	<div class="col-lg-6">
        		<h3>Geolocation</h3>
        	    <div id="gmaps-geolocation" class="google-maps"></div>
        	</div>
        	<div class="col-lg-6">
        		<h3>Polylines</h3>
        		<div id="gmaps-polylines" class="google-maps"></div>
        	</div>
        </div>
        <div class="row">
        	<div class="col-lg-12">
        		<h3>Routes</h3>
        		<div id="gmaps-route" class="google-maps"></div>
        	</div>
        </div>
        <div class="row">
        	<div class="col-lg-12">
        		<h3>Geocoding</h3>
        		<form method="post" id="geocoding_form" class="form form-horizontal">
        			<div class="form-group">
	        			<div class="col-lg-6 col-md-offset-3">
		        			<div class="input-group">
		        				<input id="address" name="address" class="form-control input-sm" type="text" placeholder="search .." />
				      			<span class="input-group-btn">
					  				<button type="submit" class="btn btn-success btn-sm">Search</button>&nbsp;&nbsp;
				      			</span>
		        			</div>
		        		</div>
        			</div>
        		</form>
        		<div id="gmaps-geocoding" class="google-maps"></div>
        	</div>
        </div>
        
    </div> <!-- /container -->
{% endblock %}